<template>
	<view>
		<!-- 头部固定区域 -->
		<view class="topPlay" :style="{height: navHeight + topHeight + 'px'}">
			<view class="top" :style="{height: topHeight + 'px'}"></view>
			<view class="mid" :style="{height: navHeight + 'px'}">
				<view class="leftTop">
					<image class="backIcoB" @click="back()" src="@/static/images/other/back.png"></image>
				</view>
			</view>
		</view>
		<!-- 单词展示区域 -->
		<view class="wordShow" :style="{marginTop: navHeight + topHeight + 'px'}">
			<view class="bigWord">
				<view class="word" :style="{'color':themeColor}">{{word.word}}</view>
				<image v-if="!word.isCollection" src="@/static/images/other/coll.png" @click="changeCollect"></image>
				<image v-if="word.isCollection" src="@/static/images/other/coll_succ.png" @click="changeCollect"></image>
			</view>
			<view class="symbol">
				<view>{{word.accent}}</view>
				<image src="@/static/images/other/voice.png" @click="playAudio()"></image>
			</view>
			<view class="meanCn">
				<view class="adj">{{word.prefix}}.</view>
				<view>{{word.meanCn}}</view>
			</view>
			<view class="history">{{word.place}}</view>
		</view>
		
		<!-- 图文例句 -->
		<view class="sentence">
			<view class="title">例句</view>
			<view class="content">
				<!-- 去掉百词斩的图片 -->
				<!-- <image class="pic" mode="widthFix" src="https://ali.bczcdn.com/r/264a9ade684d558b48bed2dfe52c5481_192075_1573801311.jpeg"></image> -->
				<view class="rightEng">
					<view class="english">{{word.sentence}}</view>
					<view class="chinese">{{word.sentenceTrans}}</view>
				</view>
				<image class="voice" mode="widthFix" src="@/static/images/other/voice.png" @click="playSentence"></image>
			</view>
		</view>
		
		<!-- 助记 -->
		<view class="memory" v-if="null != word.wordEtyma">
			<view class="title">助记</view>
			<view class="content">{{word.wordEtyma}}</view>
		</view>
		
		<!-- 英文释义 -->
		<view class="engEn">
			<view class="title">英文释义</view>
			<view class="content">{{word.meanEn}}</view>
		</view>
		
		<!-- 底部选项区域 -->
		<view class="spe" v-if="this.list == 0">
			<view class="bottom">
				<view class="options">
					<view class="optionItem" @click="toContinue">
						<text>继续</text>
						<view :style="{'backgroundColor':themeColorLess}"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 提示信息弹窗 -->
		<popup ref="popup"></popup>
	</view>
</template>

<script>
	import {wordInfo,changeCollect} from "@/api/word.js";
	import popup from "@/components/popup.vue";
	export default {
		components:{popup},
		data() {
			return {
				topHeight:0,
				navHeight:0,
				collectStatus:true,
				innerAudioContext:null,
				wordId:null,
				wordIndex:-1,
				list:0,
				word:{},
				themeColor:"",
				themeColorLess:"",
			}
		},
		async onLoad(options){
			//获取主题颜色
			let color = uni.getStorageSync("color");
			this.themeColor = JSON.parse(color).themeColor;
			this.themeColorLess = JSON.parse(color).themeColorLess;
			this.wordIndex = parseInt(options.wordIndex);
			this.wordId = options.wordId;
			if (options.list == null || typeof(options.list) == "undefined") {
				this.list = 0;
			} else {
				this.list = options.list;
			}
			this.topHeight = getApp().globalData.statusBarHeight;
			this.navHeight = getApp().globalData.navigationBarHeight;
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.autoplay = true;
			let ans = (await wordInfo(options.wordId)).data;
			console.log("单词数据",ans);
			if (ans.code != 200) {
				this.$refs.popup._popError(ans.error);
				return;
			}
			this.word = ans.data;
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			toContinue(){
				let wordIds = uni.getStorageSync("wordIds");
				if (this.wordIndex + 1 < wordIds.length){
					this.toRecite();
				} else {
					this.toComplete();
				}
				
			},
			toRecite(){
				uni.navigateTo({
					url:"/pages/recite/recite?wordIndex="+(this.wordIndex+1)
				})
				
			},
			toComplete(){
				uni.navigateTo({
					url:"/pages/complete/complete"
				})
			},
			playAudio(){
				this.innerAudioContext.src = this.word.wordAudio;
				this.innerAudioContext.play();
			},
			playSentence(){
				this.innerAudioContext.src = this.word.sentenceAudio;
				this.innerAudioContext.play();
			},
			async changeCollect() {
				let isCollection = !this.word.isCollection;
				let ans = (await changeCollect(this.wordId,isCollection)).data;
				if (ans.code != 200) {
					this.$refs.popup._popError(ans.error);
					return;
				}
				console.log(ans);
				this.word.isCollection = isCollection;
			},
		},
		components:{popup},
	}
</script>

<style lang="scss">
	/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
	@font-face {
	  font-family: "思源宋体 Heavy";font-weight: 900;src: url("//at.alicdn.com/wf/webfont/o0WWhG36b3mC/Bmtm65LQp4OuWY6jZ83Zf.woff2") format("woff2"),
	  url("//at.alicdn.com/wf/webfont/o0WWhG36b3mC/DKWcwpheYzkGzd5-AkPa6.woff") format("woff");
	  font-display: swap;
	}
	page{
		background-color: white;
	}
	// 头部固定区域
	.topPlay{
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 100;
		
		.top{
			width: 100%;
			background-color: white;
		}
		
		.mid{
			background-color: white;
			margin: 0 $both-sides;
			
			.leftTop{
				display: flex;
				height: 100%;
				align-items: center;
				color: #8d929a;
				font-size: 22rpx;
				
				.backIcoB{
					height: 40rpx;
					width: 40rpx;
				}
			}
		}
	}
	
	// 单词展示区域
	.wordShow{
		margin-left: $both-sides;
		margin-right: $both-sides;
		padding-bottom: 40rpx;
		border-bottom: solid $border-color $border-size;
		
		.bigWord{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.word{
				font-size: 50rpx;
				font-weight: 600;
			}
			image{
				height: 44rpx;
				width: 44rpx;
				
			}
		}
		.symbol{
			margin-top: 20rpx;
			color: #8d929a;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			
			image{
				height: 44rpx;
				width: 44rpx;
				padding-left: 30rpx;
			}
		}
		.meanCn{
			margin-top: 20rpx;
			display: flex;
			font-size: 24prx;
			font-family: 思源宋体 Heavy;
			.adj{
				font-style: italic;
				padding-right: 8rpx;
			}
		}
		
		.history{
			font-size: 18rpx;
			color: #8d929a;
			margin-top: 20rpx;
		}
	}
	
	// 图文例句区域
	.sentence{
		margin: 0 $both-sides;
		padding-bottom: 40rpx;
		border-bottom: solid $border-color $border-size;
		
		.title{
			padding-top: 40rpx;
			font-size: 30rpx;
			font-weight: 600;
			font-family: 思源宋体 Heavy;
		}
		
		.content{
			padding-top: 40rpx;
			display: flex;
			
			.pic{
				width: 260rpx;
				border-radius: 8rpx;
			}
			.rightEng{
				// padding-left: 20rpx;
				display: flex;
				flex-direction: column;
				
				.english{
					font-size: 24rpx;
					
					text{
						
					}
				}
				.chinese{
					padding-top: 20rpx;
					font-size: 24rpx;
					color: #8d929a;
				}
			}
			.voice{
				width: 60rpx;
			}
		}
	}
	
	// 助记
	.memory{
		margin: 0 $both-sides;
		padding-bottom: 40rpx;
		border-bottom: solid $border-color $border-size;
		
		.title{
			padding-top: 40rpx;
			font-size: 30rpx;
			font-weight: 600;
			font-family: 思源宋体 Heavy;
		}
		
		.content{
			padding-top: 40rpx;
			font-size: 32rpx;
			color: #6c7076;
		}
	}
	
	// 英文释义
	.engEn{
		margin: 0 $both-sides;
		padding-bottom: 40rpx;
		border-bottom: solid $border-color $border-size;
		
		.title{
			padding-top: 40rpx;
			font-size: 30rpx;
			font-weight: 600;
			font-family: 思源宋体 Heavy;
		}
		
		.content{
			padding-top: 40rpx;
			font-size: 32rpx;
			font-family: STHeiti;
			text-indent: 32rpx;
		}
	}
	
	// 底部选项区域
	.spe{
		width: 100%;
		position: absolute;
		bottom: 0;
		
		.bottom{
			
			.options{
				padding: 0 $both-sides 0 $both-sides;
				margin: 80rpx 20rpx 80rpx 20rpx;
				display: flex;
				justify-content: center;
				
				.optionItem{
					color: #616B7F;
					font-size: 28rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					
					view{
						width: 24rpx;
						height: 8rpx;
						margin-top: 12rpx;
						background-color: $theme-color;
						border-radius: 4rpx;
					}
				}
			}
		}
	}
</style>
